<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      v-loading="loading"
      :title="title"
      :visible.sync="isauditVisible"
      width="60%"
      class="dialogText header-none"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      center
      :destroy-on-close="true"
    >
      <el-form v-if="isauditVisible" ref="form" :model="auditForm" :rules="rules" label-width="120px">
        <el-row>
          <mainTilte title="基本信息" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商代码" prop="code">
              <el-input v-model.trim="form.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="name">
              <el-input v-model.trim="form.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算周期" prop="billing_cycles">
              <el-input v-model.trim="form.billing_cycles" disabled>
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="采购员" prop="buyer">
              <!-- <el-input v-model.trim="form.buyer"></el-input> -->
              <el-select :value="buyer" multiple clearable filterable placeholder="请选择" class="multiple-style" disabled>
                <el-option v-for="item in buyerList" :key="item.id" :value="item.username" :label="item.username" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model.trim="form.contacts" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人手机" prop="contacts_phone">
              <el-input v-model="form.contacts_phone" oninput="value=value.replace(/[^0-9-]/g,'')" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="固定电话" prop="phone">
              <el-input v-model="form.phone" oninput="value=value.replace(/[^0-9-]/g,'')" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真" prop="fax">
              <el-input v-model.trim="form.fax" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="address">
              <el-input v-model.trim="form.address" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮编" prop="zipcode">
              <el-input v-model.trim="form.zipcode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预付款比例" prop="pay_ratio">
              <el-input v-model.trim="form.pay_ratio" oninput="value=value.replace(/[^0-9-]/g,'')" disabled>
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注说明" prop="notes">
              <el-input v-model="form.notes" type="textarea" disabled autosize />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <mainTilte title="账户信息" />
        </el-row>
        <el-table ref="singleTable" :data="form.bank_accounts" stripe fit border>
          <!-- <el-table-column fixed="left" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="deleteClick(scope.row)"
                size="small"
                style="color: #ff4444"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
          <el-table-column prop="currency" label="币别" align="center"><template slot-scope="scope">
            <!-- <p v-if="scope.row.currency">{{ scope.row.currency }}</p> -->
            <el-input v-model.trim="scope.row.currency" auto-complete="" disabled />
          </template></el-table-column>
          <el-table-column prop="bank" label="开户行" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.bank" disabled />
            </template>
          </el-table-column>
          <el-table-column prop="bank_account" label="银行账号" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.bank_account" disabled />
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <mainTilte title="资质信息" />
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="营业执照" prop="phone">
              <uploadFile list-type="text" accept-type="image/jpeg,image/png" :disabled="true" :file-list="fileList" />
            </el-form-item>
          </el-col>
        </el-row>
        <div>
          <el-row>
            <mainTilte title="审核" />
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="">
                <el-radio-group v-model="auditForm.audit_status">
                  <el-radio :label="2">通过</el-radio>
                  <el-radio :label="-1">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="auditForm.audit_status == -1" :span="16">
              <el-form-item label="驳回原因" prop="audit_notes">
                <el-input v-model="auditForm.audit_notes" type="textarea" autosize />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAuditData()">保存</el-button>
        <el-button @click="cancelIsauditVisible">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    isauditVisible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {}
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    buyerList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      title: '',
      loadingText: '',
      value: '',
      auditForm: {
        id: '',
        audit_status: 2, // 审核状态 0-待提交 1-待审核 2-已审核 -1 审核拒绝
        audit_notes: '' // 驳回原因
      },
      rules: {
        audit_notes: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: ['change', 'blur']
          },
          {
            max: 500,
            message: '驳回原因必须在500个字符以内',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  computed: {
    buyer() {
      return this.form.buyer && typeof this.form.buyer === 'string'
        ? this.form.buyer.split(',')
        : this.form.buyer
    }
  },
  mounted() {},
  methods: {
    resetForm() {
      this.auditForm.id = ''
      this.auditForm.audit_status = 2
      this.auditForm.audit_notes = ''
    },
    cancelIsauditVisible() {
      this.auditForm.audit_status = 2
      this.auditForm.audit_notes = ''
      this.$emit('cancelIsauditVisible')
    },
    saveAuditData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.auditForm.id = this.form.id
          this.$emit('saveAuditData', this.auditForm)
        }
      })
    }
  }
}
</script>

<style>
</style>
